<html>
<head>
<title>Special Permission Request</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href  = "css/bootstrap.min.css" rel ="stylesheet">
	<link href  = "css/bootstrap.min.css" rel ="stylesheet">
	<link rel="stylesheet" type="text/css" href="styles/tasks4.css" media="screen"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	
	<script src="js/bootstrap.js"></script>
	<A NAME="top">
<script>

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

$(document).ready( function() {
	
	var studid;	
	var c = document.cookie;
	var id = getParameterByName('id');
	var theData;
	$.ajax({ 
		url: "http://localhost8080/formswebapp/resources/user/" + c,
		type: "GET",
		dataType: "text",
		contentType: "application/x-www-form-urlencoded",
		
		success: function(result,status,jqxhr) {
			alert("success");
			var array = JSON.parse(result);
			var stud = array[0];
			/**var output = "Last name: " + stud.lastName + " First name: " + stud.firstName + " Middle name: " + stud.middleName
			+ "\n" + "Student ID: " + stud.id + " Telephone number: " + stud.telephone 
			+ "\n" + "Local address: " + stud.streetAddress
			+ "\n" + "City: " + stud.city + " State: " + stud.state + " Zip code: " + stud.zip
			+ "\n" + "Major: " + stud.major + " Minor: " + stud.minor + "Catalog Year: " + stud.catalogYear;**/
			studid = stud.id;
			//$("#studentinfo").html(output);
			$("#firstName").append(stud.firstName);
			$("#lastName").append(stud.lastName);
			$('#middleName').append(stud.middleName);
			$('#id').append(stud.id);
			$('#telephone').append(stud.telephone);
			$('#streetAddress').append(stud.streetAddress);
			$('#city').append(stud.city);
			$('#state').append(stud.state);
			$('#zip').append(stud.zip);
			$('#major').append(stud.major);
			$('#minor').append(stud.minor);
			$('#catalogYear').append(stud.catalogYear);
		},
		error: function(xhr, status, errorThrown) {
			$("#studentinfo").html("Error:" + xhr.status + " " + xhr.statusText);
		}
	});

	$.ajax({
		url: "http://localhost:8080/formswebapp/resources/specialpermission/" + id,
		type: "GET",
		dataType: "text",
		contentType: "application/x-www-form-urlencoded",
	
			success: function(result,status,jqxhr) {
			
				var array1 = JSON.parse(result);
				var array = array1[0];
				
			
				$("#year").val(array.year);
				$("#dept1").val(array.dept1);
				$("#dept2").val(array.dept2);
				$("#dept3").val(array.dept3);
				$("#dept4").val(array.dept4);
				$("#course1").val(array.course1);
				$("#course2").val(array.course2);
				$("#course3").val(array.course3);
				$("#course4").val(array.course4);
				$("#section1").val(array.section1);
				$("#section2").val(array.section2);
				$("#section3").val(array.section3);
				$("#section4").val(array.section4);
				$("#credit1").val(array.credit1);
				$("#credit2").val(array.credit2);
				$("#credit3").val(array.credit3);
				$("#credit4").val(array.credit4);
				$("#permission1").val(array.permission1);
				$("#permission2").val(array.permission2);
				$("#permission3").val(array.permission3);
				$("#permission4").val(array.permission4);
				
				
			
				
				
			},
			error: function(xhr, status, errorThrown) {
					alert(xhr.status + " " + xhr.statusText);
			}
		});
	
	
	$("#submit").click(function(){
		var year = document.getElementById("year").value;
		var term = $("input[name=term]:checked").val();
		var dept1 = document.getElementById("dept1").value;
		var dept2 = document.getElementById("dept2").value;
		var dept3 = document.getElementById("dept3").value;
		var dept4 = document.getElementById("dept4").value;
		var course1 = document.getElementById("course1").value;
		var course2 = document.getElementById("course2").value;
		var course3 = document.getElementById("course3").value;
		var course4 = document.getElementById("course4").value;
		var section1 = document.getElementById("section1").value;
		var section2 = document.getElementById("section2").value;
		var section3 = document.getElementById("section3").value;
		var section4 = document.getElementById("section4").value;
		var credit1 = document.getElementById("credit1").value;
		var credit2 = document.getElementById("credit2").value;
		var credit3 = document.getElementById("credit3").value;
		var credit4 = document.getElementById("credit4").value;
		var permission1 = document.getElementById("permission1").value;
		var permission2 = document.getElementById("permission2").value;
		var permission3 = document.getElementById("permission3").value;
		var permission4 = document.getElementById("permission4").value;

		var theUrl = "http://localhost:8080/formswebapp/resources/specialpermission";

		var theData = "year="+year+"&"+"term="+term+"&"+"dept1="+dept1+"&"+"dept2="+dept2+"&"
		+"dept3="+dept3+"&"+"dept4="+dept4+"&"+"course1="+course1+"&"+"course2="+course2+"&"
		+"course3="+course3+"&"+"course4="+course4+"&"+"section1="+section1+"&"+"section2="+section2+"&"
		+"section3="+section3+"&"+"section4="+section4+"&"+"credit1="+credit1+"&"+"credit2="+credit2+"&"
		+"credit3="+credit3+"&"+"credit4="+credit4+"&"+"permission1="+permission1+"&"+"permission2="+permission2+"&"
		+"permission3="+permission3+"&"+"permission4="+permission4+"&"+"studId="+studId;

		$.ajax({
			url: theUrl,
			type: "POST",
			datatype: "text",
			contentType: "application/x-www-form-urlencoded",
			data: theData,

			success: function(result,status,jqxhr) {
				alert("success");
			},
			error: function(xhr,status,errorThrown) {
				alert("error: "+status+" e: "+errorThrown);
			}
		});
	});
});
</script>
</head>
<body>
<!--Header-->
	<div class = "navbar navbar-inverse navbar-static-top">
		<div class="container">
			<div class = "navbar-header">
				<div class="tut-container-img">
						<img class="img-responsive" src="cculogo.png" alt=""></a>
					</div>
						
				<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
				</button><!--Create button for mobile site-->
			</div>
			<div class = "collapse navbar-collapse navHeaderCollapse">
				<ul class = "nav navbar-nav navbar-right">
					<li><a href = "user.html">Home</a></li>
					
					<li class = "dropdown">
						<a href = "#" class = "dropdown-toggle" data-toggle ="dropdown">All Forms<b class="caret"></b></a>
						<ul class = "dropdown-menu">
							<li><a href = "courserepeat.html">Course Repeat Form</a></li>
							<li><a href = "coursesub.html">Course Substitution Form</a></li>
							<li><a href = "transcript.html"> Transcript Form</a></li>
							<li><a href = "specialpermission.html"> Special Permission Form</a></li>
						</ul>
					</li>
					
					<li class = "dropdown">
						<a href = "#" class = "dropdown-toggle" data-toggle ="dropdown">Social Media <b class="caret"></b></a>
						<ul class = "dropdown-menu">
							<li><a href = "http://twitter.com">Twitter</a></li>
							<li><a href = "http://facebook.com">Facebook</a></li>
							<li><a href = "https://plus.google.com/">Google+</a></li>
							<li><a href = "http://instagram.com">Instagram</a></li>
						</ul>
					</li>
					<li><a href = "#about" data-toggle ="modal">About</a></li>
					<li><a href = "#contact" data-toggle ="modal">Contact</a></li>
					<li>
						<a class="navbar-brand" href="setting.html">
							<i class="glyphicon glyphicon-cog"></i>
						</a>
					</li>
					<li>
						<button type="button" id="btnLogout" class="btn btn-default navbar-btn">Logout</button
					</li>
					<li>
						<form class="navbar-form" role="search">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
							<div class="input-group-btn">
								<button class="btn btn-default" type="search"><i class="glyphicon glyphicon-search"></i></button>
							</div>
						</div>
						</form>
						
					</li>

				</ul>
			</div>	
		</div>
	</div>
	
	<!--Student Info-->
	<div class = "container">
		<div class = "row">
			<div class = "col-lg-9">
				<div class ="panel panel-default">
					<div class ="panel-body">
					<p></p>
					<h3><b>Student Information</b></h3>
					<hr>
					<div=class="container">
						<div class = "column">
							<div class = "col-xs-6 col-md-4">
								<div id="firstName"><b>First Name:</b>&nbsp </div>	
								<div id="lastName"><b>Last Name:</b>&nbsp</div>
								<div id="middleName"><b>Middle Name:</b>&nbsp</div>	
								<div id="id"><b>Id:</b>&nbsp</div>
								<div id="telephone"><b>Telephone:</b>&nbsp</div>	
							</div>
							<div class = "col-xs-6 col-md-4">
								<div id="streetAddress"><b>Street Address:</b>&nbsp</div>
								<div id="city"><b>City:</b>&nbsp</div>	
								<div id="state"><b>State:</b>&nbsp</div>
								<div id="zip"><b>Zip:</b>&nbsp</div>	
								<div id="major"><b>Major:</b>&nbsp</div>
								<div id="minor"><b>Minor:</b>&nbsp</div>	
								<div id="catalogYear"><b>Catalog:</b>&nbsp</div>
							</div>
						</div>			
					</div>	
				</div>
			</div>
			
		</div>	
	</div>
		
	
	<div class="container1">	
		<div class = "container">
			<div class = "row">
				<div class = "col-lg-9">
					<div class ="panel panel-default">
						<div class ="panel-body">
							<div class= "page-header">
							<p></p>
							<h3><b>Special Permission to Enroll in Class<b></h3>
							<hr>
							<!--Start form-->
							<form class="form-horizontal" role="form" autocomplete="on" >
								<div class="form-group">
									<label for="year" class="col-lg-2 control-label">Year </label>
									<div class="col-sm-4">
										<input type="text" class ="form-control" id="year" value=""required>								
									</div>
								</div>
								
								<div class="form-group">
									<label for="grade" class="col-lg-2 control-label">Term</label>
									<div class="col-sm-4">
										<input type="text" class ="form-control" id="yearfirst" value="" required>
										<input type="radio" name="firstterm" value="1">Spring&nbsp
										<input type="radio" name="firstterm" value="2">May Semester&nbsp
										<input type="radio" name="firstterm" value="3">S1&nbsp
										<input type="radio" name="firstterm" value="4">S2&nbsp
										<input type="radio" name="firstterm" value="5">Fall<br>
									</div>
								</div>
								
								<div class="form-group">
									<div class="table-responsive">
										<table class="table table-hover">						
											<tr>
												<th>Department</th>
												<th>Course</th>
												<th>Section</th>
												<th>Credit</th>
												<th>Permission Allowed (Code 1,2,3,4,5)</th>
											</tr>
									
										
											<tr>
												<td><input type="text" class ="form-control" id="dept1" value=""></td>
												<td><input type="text" class ="form-control" id="course1" value=""></td>
												<td><input type="text" class ="form-control" id="section1" value=""></td>
												<td><input type="text" class ="form-control" id="credit1" value=""></td>
												<td><input type="text" class ="form-control"id="permission1" value=""></td> 
											</tr>
											<tr>
												<td><input type="text" class ="form-control" id="dept2" value=""></td>
												<td><input type="text" class ="form-control" id="course2" value=""></td>
												<td><input type="text" class ="form-control" id="section2" value=""></td>
												<td><input type="text" class ="form-control" id="credit2" value=""></td>
												<td><input type="text" class ="form-control" id="permission2" value=""></td> 
											</tr>
											<tr>
												<td><input type="text" class ="form-control" id="dept3" value=""></td>
												<td><input type="text" class ="form-control" id="course3" value=""></td>
												<td><input type="text" class ="form-control" id="section3" value=""></td>
												<td><input type="text" class ="form-control" id="credit3" value=""></td>
												<td><input type="text" class ="form-control" id="permission3" value=""></td> 
											</tr>
											<tr>
												<td><input type="text" class ="form-control" id="dept4" value=""></td>
												<td><input type="text" class ="form-control" id="course4" value=""></td>
												<td><input type="text" class ="form-control" id="section4" value=""></td>
												<td><input type="text" class ="form-control" id="credit4" value=""></td>
												<td><input type="text" class ="form-control"id="permission4" value=""></td> 
											</tr>
										</table>
									
										<button type="button" id="submit" >Submit</button>
									</div>
								</div>
							</form>
							<!--End form-->
							
							</div>
						</div>
					</div>
				</div>	
				<div class = "col-lg-3">
				<div class="list-group">
					<a href ="#" class ="list-group-item">
						<p class= "list-group-item-text">
						<img src="img/chant.jpg">
						</p>
					</a>
				</div>
				</div>
			</div>
		</div>	
					
			
			
			
				</div>
		<ol>
		<br>
			<li>Class Full</li>
			<li>Instructor's Consent</li>
			<li>Class Restriction</li>
			<li>Academic Hours Overload</li>
			<li>Requisite Deficiencies</li>
		</ol>
		<p></p>
	
		
		<hr>					
		<p></p>						
		
	</div>	
			
	<p></p>
	<div id= "btt">	
	<A HREF="#top" class="btn btn-default">Back To Top</A>
	</div>
	<!--Footer-->
	<div class = "navbar navbar-inverse navbar-fixed-bottom">
		<div>
			<p class = "navbar-text pull-right">2014 Coastal Carolina University | P.O. Box 261954, Conway, SC 29528-6054 USA | +1 843-347-3161</p>
		</div>
	</div>
	
	
</body>
</html>
